import React, { PureComponent } from 'react';
import { Form, Select, Spin } from 'antd';
import { connect } from 'dva';
import {debounce} from "lodash"
class SelectRefRoads extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            svalue: '', fetching: false, data: [], roadvalue: [], page: {
                pageNum: 1,
                pageSize: 5
            }
        }
        this.onConfirm = this.onConfirm.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
        this.handleSearch = debounce(this.handleSearch, 1000, { 'maxWait': 1000 });
    }
    handleChange(value) {
        this.setState({ roadvalue: value });
    }
    async handleSearch(value) {
        if (value) {
            this.setState({
                fetching: true
            })
            let res = await this.props.queryProjectRoads({ projectId: this.props.project.id, name: value, ...this.state.page })
            this.setState({ data: res, fetching: false });
        } else {
            this.setState({ data: [], fetching: false });
        }
    };
    onConfirm(params = {}) {
        const {form,addRefRoads}=this.props;
        const {roadvalue}=this.state;
        if (roadvalue) {
            form.resetFields()
           addRefRoads({ids:roadvalue}, (data) => {
                if (params.onSuccess) {
                    params.onSuccess(data);
                }
            }, (error) => {
                if (params.onError) {
                    params.onError(error);
                }
            });
        }

    }

    componentDidMount() {
        if (this.props.onLoaded) {
            this.props.onLoaded(this);
        }
    }

    render() {
        const {
            form = {},
        } = this.props;

        return (
            <Form
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
            >
                <Form.Item label='路线资源'>

                    <Select mode='multiple' value={this.state.roadvalue} notFoundContent={this.state.fetching ? <Spin size="small" /> : null} showSearch placeholder="请输入搜索关键字" onSearch={this.handleSearch}
                        onChange={this.handleChange}>
                        {this.state.data && this.state.data.length > 0 ? this.state.data.map((r, i) => (
                            <Select.Option key={r.id} value={r.id}>{r.name}</Select.Option>
                        )) : ''}
                    </Select>
                </Form.Item>
            </Form>
        );
    }
}

export default connect(
    ({  }) => ({  }),
    dispatch => ({
        addRefRoads: (values, onSuccess, onError) => dispatch({
            type: 'refRoads/addRefRoadsReq',
            payload: {
                values,
                onSuccess,
                onError  
            }
        }),
        queryProjectRefRoads: projectId => dispatch({
            type: 'refRoads/loadProjectRefRoads',
            payload: { projectId }
        }),
        queryProjectRoads: values => dispatch({
            type: 'refRoads/queryProjectRoads',
            payload: values
        })
    })
)(Form.create('roads', {

})(SelectRefRoads));